<template>
    <div class="home-container">
        <el-row :gutter="24" style="top: -15px;">
            <el-col :span="24">
                <ul style="cursor: pointer;">
                    <li class="add"><img src="../../assets/home/app.png" @click="add"><span>应用中心</span></li>
                    <li v-for="item in appResources">
                        <img :src="require(`@/assets/home/app/${item.meta.icon.name}.${item.meta.icon.type}`)" @click="imgClick(item)">
                        <span>{{ item.meta.title }}</span>
                    </li>
                </ul>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import particles from '../../components/particles/particles.vue';
import {mapActions, mapGetters} from 'vuex';
import { getToken, setToken } from '@/utils/token';
import router from "../../router";
import store from "../../store";

export default {
    name: 'index',
    components: {
        particles
    },
    data() {
        return {
            height: window.innerHeight,
            rowBottom: window.innerHeight + 15,
            appResources: []
        }
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.height = window.innerHeight;
                this.rowBottom = window.innerHeight + 15;
            })();
        };
    },
    computed: {
        ...mapGetters([ 'phone', 'userRole' ]),
    },
    methods: {
        imgClick: function(item) {
            this.$router.push({ path: item.redirect});
        },
        add() {

        },
        loadAppResources() {
            this.$router.options.routes.forEach(item => {
              if (!item.meta.hidden && !item.isLeaf && this.userRole.split(",").includes(item.id.toString())) {
                let [app, checkParams] = [item, false];
                this.buildAppPath(app, item, checkParams);
                this.appResources.push(app);
              }
            });
        },
        buildAppPath(app, item, checkParams){
          let index = 0, flag = false;
          let itemSort = item.children.sort((a, b) => {
            return a.sort - b.sort;
          });
          for (let i = 0; i < itemSort.length; i++) {
            let children = itemSort[i];
            if (this.userRole.split(",").includes(children.id.toString()) && !flag) {
              flag = true;
              if (children.children != undefined && children.children.length > 0) {
                checkParams = true;
                this.buildAppPath(app, children, checkParams);
              } else {
                if (checkParams) {
                  if (index == 0 || (index != 0 && index > children.sort)) {
                    app.redirect = children.path;
                  }
                  index = children.sort;
                } else {
                  app.redirect = children.path;
                  break;
                }
              }
            }
          }
        }
    },
    created() {
        this.loadAppResources();
    }
}
</script>

<style lang="scss" scoped>
    @import 'css/home.css';
</style>
